<template>
  <div class="main">
    <h3>添加</h3>
    <hr>
    标题: <input type="text" v-model="title"> 日期: <input type="date" v-model="date">
    <div class="btn">
      <button @click="submit">提交</button> <br>
      <button @click="add">添加</button>
    </div>
    <hr>

    <table border="1" width="100%" @scroll="onScroll">
      <div class="scroll" :style="{ height: list.length * 30 + 'px' }">
        <thead>
          <tr>
            <th>标题</th>
            <th>日期</th>
            <th>操作</th>
          </tr>
        </thead>
        <tr :style="{
          height: currentIndex * 30 + 'px'
        }"></tr>
        <tr v-for="(item, index) in  displayArr" :key="item.id">
          <td>{{ item.title }}</td>
          <td>{{ item.date }}</td>
          <td>
            <button @click="del(item.id)">删除</button>
            <button @click="edit(item.id)">编辑</button>
          </td>
        </tr>
      </div>


    </table>
  </div>
</template>

<script>
// 准备一个待渲染的数组，数组从 1 - 1000
const list = []
for (let i = 1; i <= 1000; i++) {
  list.push({
    title: '标题' + i,
    date: '2020-01-01',
    id: i
  })
}
export default {
  name: 'Child',
  data() {
    return {
      list: list,
      title: '',
      date: '',
      currentIndex: 0,
    }
  },
  methods: {
    // console.log()
    add() {
      if (this.title.trim == '' || this.date == '') {
        alert('标题和日期不能为空')
        return
      }
      this.list.push({
        title: this.title,
        date: this.date,
        id: +new Date()
      })
      this.title = ''
      this.date = ''
      localStorage.setItem('list', JSON.stringify(this.list))
    },
    del(id) {
      this.list = this.list.filter(item => item.id != id)
    },
    edit(id) {
      this.pid = id
      const el = this.list.find(item => item.id == id)
      this.title = el.title
      this.date = el.date
    },
    submit() {
      const compile = this.list.find(item => item.id == this.pid)
      if (compile.title === this.title && compile.date === this.date) {
        alert('没有修改')
        return
      }
      compile.title = this.title
      compile.date = this.date
      localStorage.setItem('list', JSON.stringify(this.list))

    },
    onScroll(e) {
      const scrollTop = e.target.scrollTop
      this.currentIndex = Math.floor(scrollTop / 30)
      // 设置 placeholder 的高度，让 currentArr 渲染到它的下面
      // this.$refs.placeholder.style.height = currentIndex * 30 + "px";
      // this.list = currentArr;

    }
  },
  computed: {
    displayArr() {
      return this.list.slice(this.currentIndex, this.currentIndex + 10)
    }
  }

}

</script>
<style >
table {
  position: relative;
  display: block;
  border-collapse: collapse;
  text-align: center;
  width: 400px;
  height: 300px;
  overflow-y: auto;
}

table tr {
  height: 30px;
}

table thead {
  position: sticky;
  top: 0;
  width: 400px;
  /* height: 100%; */
  background-color: #fff;
}

table thead th {
  width: 400px !important;
}

table tr {
  width: 100% !important;
}

table tbody {
  display: block;
  width: 400px;
  height: 300px;

  /* overflow: hidden; */

}

table tbody tr {
  /* position: absolute; */
  width: 100% !important;
}


.main {
  width: 400px;
  margin: 0 auto;
  margin-top: 200px;
}

.btn {
  margin-top: 10px;
}

.btn button {
  margin-top: 10px;
}

.placeholder {
  height: 30px;
}
</style>